<template>
  <div
    ref="popup"
    @touchstart="touchStart"
    @touchmove.prevent="touchMove"
    @touchend="touchEnd"
    class="popup"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      prepos: null, //按下时的位置
      curpos: null, //移动时的位置
    };
  },
  methods: {
    touchStart({ touches }) {
      this.prepos = touches[0];
      // console.log("touchStart", touches[0].pageX);
    },
    touchMove({ touches }) {
      this.curpos = touches[0];
      // console.log("touchMove", touches[0].pageX);
      let flow = this.curpos.pageX - this.prepos.pageX;
      if (flow < 0) {
        flow = 0;
      }
      // console.log(flow);
      this.$refs.popup.style.transform = "translateX(" + flow + "px)"; //操作dom
      // this.$refs.popup.style.transform = `translateX(${flow}px)`; //操作dom
    },
    touchEnd() {
      // 直接点进详情页，没有移动，所以curpos是null，会报错，因此加个？
      let flow = this.curpos?.pageX - this.prepos.pageX;
      if (flow > window.innerWidth * 0.3) {
        this.$refs.popup.style.transform = `translateX(${
          window.innerWidth * 0.7
        }px)`;
        this.$emit("setFlag",false);
      } else {
        this.$refs.popup.style.transform = "translateX(0)";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.popup {
  position: fixed;
  height: 100%;
  overflow-y: scroll;
  top: 0;
  right: 0;
  width: 260px;
  background: #fff;
  animation: sliderin 0.3s linear;
}
</style>
